<template>
  <el-row v-loading="loading" class="min-h-[130px]" :gutter="10">
    <el-col
      :span="matterProcessStatisticsList?.length === 4 ? 6 : 8"
      v-for="data of matterProcessStatisticsList"
      :key="data.taskType"
    >
      <div
        class="p-2 cursor-pointer shadow-[0_2px_4px_rgba(0,0,0,0.1)] hover:shadow-[0_8px_12px_rgba(0,0,0,0.1)]"
        :style="[
          {
            background: data.background,
          },
        ]"
        @click="handleTaskClick(data.url)"
      >
        <div class="flex justify-between items-center">
          <img class="w-8" :src="data.icon" />
          <h1 class="flex-1 ml-3 text-[15px] font-[700]">{{ data.title }}</h1>
          <div class="text-sm flex items-center">
            <span class="text-base font-[700]">{{ data.totalNum }}</span>
            件
          </div>
        </div>
        <div class="grid grid-cols-2 gap-x-1 gap-y-2 text-xs mt-4">
          <div @click.stop="handleTaskClick(data.url, EMatterStatus['未签收'])">
            <div class="small-card">
              <p>未签收</p>
              <p class="status-num">
                {{ data.unSignedMatterNum }}
              </p>
            </div>
          </div>
          <div
            @click.stop="handleTaskClick(data.url, EMatterStatus['正常推进'])"
          >
            <div class="small-card">
              <p>正常推进</p>
              <p class="status-num">
                {{ data.normalNum }}
              </p>
            </div>
          </div>
          <div
            class="small-card"
            @click.stop="handleTaskClick(data.url, EMatterStatus['已完成'])"
          >
            <p>已完成</p>
            <p class="status-num">{{ data.finishedNum }}</p>
          </div>
          <div
            class="small-card"
            @click.stop="handleTaskClick(data.url, EMatterStatus['已超时'])"
          >
            <p>已超时</p>
            <p class="status-num">{{ data.timeoutNum }}</p>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { queryMatterProcessStatisticsByType } from '@/api/home'
import useFetch from '@/hooks/useFetch'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { EAssignColor, EEassignStr } from '@/views/events/leader/util'
import sjjbIcon from '@/assets/icons/sjjb.png'
import qzjbIcon from '@/assets/icons/qzjb.png'
import qwjbIcon from '@/assets/icons/qwjb.png'
import qfjbIcon from '@/assets/icons/qfjb.png'
import { EMatterStatus } from '@/components/statusShow/util'

const router = useRouter()

const defaultMatterList = [
  {
    title: '书记交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    background: 'rgba(227, 249, 233, 1)',
    color: EAssignColor[EEassignStr[1]],
    numClass: 'text-success',
    url: '/events/leader/secretary',
    taskType: EEassignStr[1],
    points: '0,50 20,40 30,20 40,30 50,20 60,10 70,30 80,48',
    icon: sjjbIcon,
  },
  {
    title: '区长交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    background: '#FFF1E9',
    color: EAssignColor[EEassignStr[3]],
    numClass: 'text-[#8D4EDA]',
    url: '/events/leader/warden',
    taskType: EEassignStr[3],
    points: '0,50 20,40 30,30 40,40 50,30 60,20 70,10 80,48',
    icon: qzjbIcon,
  },
  {
    title: '区委交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    background: '#F2F3FF',
    color: EAssignColor[EEassignStr[2]],
    numClass: 'text-primary',
    url: '/events/leader/district',
    taskType: EEassignStr[2],
    points: '0,50 20,48 30,30 40,20 50,10 60,30 70,40 80,48',
    icon: qwjbIcon,
  },
  {
    title: '区府交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    background: '#EBFCFF',
    color: EAssignColor[EEassignStr[4]],
    numClass: 'text-warning',
    url: '/events/leader/government',
    taskType: EEassignStr[4],
    points: '0,50 20,40 30,30 40,25 50,10 60,20 70,38 80,48',
    icon: qfjbIcon,
  },
]
const matterProcessStatisticsList = ref([])

const { loading, onFetchSuccess } = useFetch(
  queryMatterProcessStatisticsByType,
  {},
  true,
)

onFetchSuccess((data) => {
  if (data?.length) {
    const newData = data.map((origin) => {
      let target = defaultMatterList.find(
        (item) => item.taskType === origin.taskType,
      )
      return {
        ...origin,
        ...target,
        totalNum: origin.matterTotalNum,
        normalNum: origin.proceedNormallyMatterNum,
        finishedNum: origin.completedMatterNum,
        timeoutNum: origin.timeOutMatterNum,
      }
    })
    matterProcessStatisticsList.value = newData
  } else {
    matterProcessStatisticsList.value = defaultMatterList.slice(1)
  }
})

// 事项任务跳转
const handleTaskClick = (url: string, status?: EMatterStatus) => {
  router.push({
    path: url,
    query: {
      status: status ?? 0,
    },
  })
}
</script>

<style lang="scss" scoped>
.small-card {
  padding: 6px;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  @apply flex justify-between items-center;
  color: rgba(75, 91, 118, 1);

  .status-num {
    font-size: 16px;
    font-weight: 700;
    color: #2c3645;
  }
}
</style>
